
<template>
  <div class="singer">
    <div class="hot">
      <span v-for="(hot,index) in hotList"
            :key="hot"
            :class="{title: num === index}"
            @click="changeHot(hot,index)"> {{ hot }}</span>
    </div>
    <div class="all">
      <span v-for="(all, index) in allList"
            :key="all"
            class="all-item"
            :class="{active: type === index}"
            @click="handler(index)">{{ all }}</span>
    </div>
    <div class="singer-container">
      <div v-for="artist in topList"
           :key="artist.id"
           class="singer-item">
        <img :src="artist.pic"
             alt="">
        <p>{{ artist.name }}</p>
        <span>{{ artist.musicNum }}首歌</span>
      </div>
    </div>
    <div class="singer-small-container">
      <div v-for="small in smallList"
           :key="small.id"
           class="singer-small-item">
        <img :src="small.pic"
             alt="">
        <p>{{ small.name }}</p>
      </div>
      <div class="singer-small-item" />
      <div class="singer-small-item" />
    </div>
    <div class="pagination">
      <el-pagination class="pag-item"
                     size="middel"
                     background
                     :total="total"
                     :current-page="index"
                     @current-change="changePage"
                     layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reqGetSingerList } from '@/api/singer'
export default {
  name: 'Singer',
  data () {
    return {
      singerList: "",
      type: 0,
      page: 1,
      letter: '',
      num: 0,
      hotList: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      allList: ['全部', '华语男', '华语女', '华语组合', '日韩男', '日韩女', '日韩组合', '欧美男', '欧美女', '欧美组合', '其他'],
      index: 1
    }
  },
  computed: {
    topList () {
      return this.singerList.artistList && this.singerList.artistList.filter((item, index) => {
        return index < 12
      })
    },
    smallList () {
      return this.singerList.artistList && this.singerList.artistList.filter((item, index) => {
        return index >= 12
      })
    },
    total () {
      return this.singerList.total && (this.singerList.total - 0) / 10
    }
  },
  mounted () {
    this.getSingerList()
  },
  methods: {
    async getSingerList () {
      let { type, page, letter } = this
      const result = await reqGetSingerList(type, page, letter)
      if (result.code === 200) {
        this.singerList = result.data
      }
    },
    handler (value) {
      this.type = value
      this.getSingerList(this.type)
    },
    changeHot (value, index) {
      console.log(value, index)
      if (value === '热门') {
        this.num = index
        this.letter = ''
        this.getSingerList(this.type, this.page)
      } else{
        this.num = index
        this.letter = value
        this.getSingerList(this.type, this.page, this.letter)
      }
    },
    changePage (value) {
      this.page = value
      this.getSingerList(this.type, this.page)
    }
  }
}
</script>

<style lang="less" scoped>
.singer {
  margin-top: 20px;
  .hot {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    padding: 20px 0;
    span {
      padding: 2px 8px;
      border-radius: 15px;

      &.title {
        font-weight: 600;
        color: #000;
        background-color: #ffe443;
      }
    }
  }
  .all {
    display: flex;
    padding: 20px 0 50px 0;
    .all-item {
      color: #999;
      font-size: 14px;
      margin-right: 30px;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 15px;
      &.active {
        color: #333;
        font-weight: 600;
        background-color: #ffe443;
      }
    }
  }
  .singer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .singer-item {
      width: 16%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 0 50px 0;
      cursor: pointer;
      img {
        width: 166px;
        border-radius: 50%;
      }
      p {
        padding: 10px;
        font-size: 16px;
      }
      span {
        color: #999;
      }
    }
  }
  .singer-small-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .singer-small-item {
      display: flex;
      align-items: center;
      width: 16%;
      margin-bottom: 30px;
      cursor: pointer;
      img {
        height: 50px;
        margin-right: 5px;
        border-radius: 50%;
      }
      p {
        width: 110px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .pagination {
    text-align: center;
    margin: 48px 0 30px 0;
    /deep/ .el-pager {
      .number,
      .more {
        width: 42px;
        height: 42px;
        text-align: center;
        line-height: 42px;
        color: #333;
        background-color: transparent;
      }
      .number.active {
        background-color: rgb(255, 223, 31);
      }
    }
    /deep/ .btn-prev,
    /deep/ .btn-next {
      width: 42px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      background-color: transparent;
    }
  }
}
</style>